<template>
  <div class="login_container pr-1 pl-1">
		<div class="login_container_top_box">
			<span @click="bottomPopShow = true" class="mr-0">{{languageText}}</span>
			<van-icon name="arrow-down" />
		</div>
		<div class="login_container_logo">
			<div>
				<img src="@/image/login/title@1x.png" class="mb-0" alt="">
			</div>
			<div class="login_container_logo_title">{{$t("您好!欢迎来到 SPACE AI")}}</div>
		</div>
		<div class="login_container_loginBtns pr-2 pl-2 mb-2">
			<div class="loginBtns_item mb-1" @click="loginByMetamask" v-if="showWalletLogin">
				<div class="loginBtns_item_img">
					<img src="@/image/login/mt.png" alt="">
				</div>
				<div class="loginBtns_item_title">
					{{ $t("钱包直连") }}
				</div>
			</div>
			<div class="loginBtns_item" @click="loginByEmail">
				<div class="loginBtns_item_img">
					<img src="@/image/login/email.png" alt="">
				</div>
				<div class="loginBtns_item_title">
					{{ $t("邮箱登录") }}
				</div>
			</div>
		</div>
		<div class="login_container_content pr-1 pl-1">
			{{ $t("首先，用以上钱包连接，请务必安全地储存您的私钥和助记词，切勿与任何人分享") }}
		</div>
    <img
      class="help_btn"
      src="@/image/global/customer_service_icon.png"
      @click="onHelpClick"
    />
		<van-popup v-model="popShow" :close-on-click-overlay="false">
      <div class="pop_content">
        <div class="pop_title mb-1">{{$t("绑定邀请人")}}</div>
        <div class="pos_label mb-1">{{$t("输入邀请人钱包地址，与好友一同前往！")}}</div>
        <input type="text" class="mb-2" v-model="inviteAddress" :placeholder="$t('请输入邀请人地址...')">
        <button @click="bindInviteAddress">{{$t('确认绑定')}}</button>
      </div>
      
    </van-popup>
    <van-popup v-model="bottomPopShow" position="bottom" >
      <van-picker
        :title="$t('选择语言')"
        show-toolbar
        :columns="columns"
        @confirm="onConfirm"
        @cancel="onCancel"
      />
    </van-popup>
	</div>
</template>

<script>
import { connectWallet, checkWallet } from "@/api/index";
import { loginNew } from '@/request/login'
import { langList } from "@/utils/index";
import { setLanguage } from '@/lang';
import { getUserInfo } from '@/request/personalCenter';
export default {
	name: "Login",
	data(){
		return {
			popShow: false,
      inviteAddress:'',
      walletAddress:'',
      bottomPopShow:false,
      columns:[],
		}
	},
	mounted(){
    this.columns = langList.map(item=>item.title)
	},
  // watch:{
  //   popShow : (newVal)=>{
  //     if(newVal === true){
  //       this.disposeAddress()
  //     }
  //   }
  // },
  computed:{
    showWalletLogin(){
      return true
      // 判断是否安装了钱包
      // return checkWallet()
    },
    languageText(){
      let arr = langList.filter(item=>item.value === this.$i18n.locale)
      if(arr.length > 0){
        return arr[0].title
      }else{
        return this.$t("语言")
      }
    }
  },
	methods:{
		async loginByMetamask(){
      if(checkWallet()){
        // 钱包登录
        console.log("钱包登录")
        const res = await connectWallet()
        if(!!res.useAccount){
          // 返回钱包地址
          console.log(res)
          this.dispose(res)
          this.walletAddress = res.useAccount
        }else{
          this.$toast.fail(this.$t("钱包验证失败"))
        }
      }else{
        alert(this.$t("请安装MetaMask钱包或其他以太坊兼容钱包"));
      }
			
		},
		loginByEmail(){
			// 邮箱登录
			if(this.$route.name !== "EmailLogin"){
				this.$router.push({
					name: "EmailLogin"
				})
			}
		},
    bindInviteAddress(){
      // 开始校验钱包登录邀请地址是否正确
      if(!!this.inviteAddress){
        let obj = {
          inviteAddress: this.inviteAddress,
          walletAddress: this.walletAddress,
        }
        
      }else{
        this.$toast.fail(this.$t("请输入邀请人地址"))
      }
    },
    async dispose(res){
      loginNew({account:res.useAccount , sign:res.sign , type:1}).then(res=>{
        if(res.code === 1){
        	let { token } = res.data.userinfo
          localStorage.setItem('token', token)
          localStorage.setItem('imToken', res.data.im_token)
          localStorage.setItem('im_userinfo', JSON.stringify(res.data.im_userinfo))
          localStorage.setItem('address', this.walletAddress)
          this.$toast.success(this.$t("登录成功"))
          this.$router.push({name:'HomePage'})
          getUserInfo()
        }else{
          this.$toast.fail(res.msg)
          this.$router.push({name:'RegisterAccount'})
        }
      })
    },
    onConfirm(value, index) {
      let arr = langList.filter(item=>item.title === value)
      if(arr.length > 0){
        setLanguage(arr[0].value)
        this.bottomPopShow = false
      }
    },
    onCancel() {
      this.bottomPopShow = false;
    },
    onHelpClick() {
      window.open(process.env.VUE_APP_HELP_URL, '_blank');
    }
	}
};
</script>

<style lang="less">
</style>